<template>
    <drag-area ref="drag" :custom-nav="customNav" :custom-tabbar="customTabbar" :x="x" :y="y" :edge="edge" :width="btnWidth" :height="btnHeight" @touchmove="onTouchmove" @touchend="onTouchend">
        <view class="drag-button" :style="dragBtnStyl" @tap="onClick">
            <slot></slot>
        </view>
    </drag-area>
</template>

<script>
import DragArea from './drag-area.vue';
export default {
    name: 'drag-button',
    components: {
        DragArea
    },
    props: {
        buttonStyle: {
            type: String,
            default: ''
        },
        customTabbar: {
            type: Boolean,
            default: false
        },
        customNav: {
            type: Boolean,
            default: false
        },
        backgroundColor: {
            type: String,
            // default: '#FF4D6A'
            default: 'rgba(000, 000, 000, 0.4)'
        },
        color: {
            type: String,
            default: '#fff'
        },
        edge: {
            type: Number,
            default: 15
        },
        isDock: {
            type: Boolean,
            default: true
        },
        width: {
            type: Number,
            default: 120
        },
        height: {
            type: Number,
            default: 120
        },
        bottom: {
            type: Number,
            default: 200
        }
    },
    data() {
        return {
            x: 375,
            y: 750,
            move: {
                x: 375,
                y: 750
            },
            winWidth: 375,
            windowTop: 0,
            statusBarHeight: 0,
            safeAreaBottom: 0
        };
    },
    computed: {
        btnWidth(){
            return uni.upx2px(this.width)
        },
        btnHeight(){
            return uni.upx2px(this.height)
        },
        dragBtnStyl() {
            const { backgroundColor, color, buttonStyle, btnWidth, btnHeight } = this;
            let styl = `width:${btnWidth}px;height:${btnHeight}px;`;
            if (backgroundColor) {
                styl += `background-color:${backgroundColor};`;
            }
            if (color) {
                styl += `color:${color};`;
            }
            return styl + buttonStyle;
        }
    },
    created() {
        const sysInfo = uni.getSystemInfoSync();
        this.winWidth = sysInfo.windowWidth;
        this.statusBarHeight = sysInfo.statusBarHeight;
        this.safeAreaBottom = sysInfo.safeAreaInsets.bottom;
        let navHeight = 0;
        let tabbarHeight = 0
        if (this.customNav) {
            navHeight = this.statusBarHeight + 44;
        }
        if(this.customTabbar){
            tabbarHeight = this.safeAreaBottom + 50;
        }
        this.x = sysInfo.windowWidth - this.btnWidth - this.edge;
        this.y = sysInfo.windowHeight - navHeight - tabbarHeight - this.btnHeight - this.edge - uni.upx2px(this.bottom);
        this.move.x = this.x;
        this.move.y = this.y;
    },
    methods: {
        onClick(e) {
            this.$emit('click', e);
        },
        onTouchmove(e) {
            this.move.x = e.detail.x;
            this.move.y = e.detail.y;
        },
        onTouchend(e) {
            if (!this.isDock) return;
            this.x = this.move.x;
            this.y = this.move.y;
            // const { clientX } = e.changedTouches[0];
            // console.log({ clientX });
            let edgeRigth = this.winWidth - this.btnWidth - this.edge;
            let halfWidth = this.winWidth / 2;
            this.$nextTick(() => {
                if (this.move.x < halfWidth - this.btnWidth / 2) {
                    this.x = this.edge;
                } else {
                    this.x = edgeRigth;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.drag-button {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99;
}
</style>
